<template>
    <div class="order-flow-chart">
        <!-- <el-button type="link" @click="showFlowDialog">查看订单流程</el-button> -->
        <!-- <el-dialog title="订单流程图" :visible.sync="dialogVisible" width="80%" class="flow-chart-dialog"> -->
        <div class="flow-chart-dialog">
            <div class="flow-header">
                <div class="flow-title">订单号: {{ order.orderNo }}</div>
                <div class="flow-status">当前状态: <span :class="['status-text', 'status-' + getStatusType(order.orderStatus)]">{{ order.orderStatusText }}</span>
                </div>
            </div>

            <!-- 流程图主体 -->
            <div class="flow-chart-container">
                <!-- 历史步骤 -->
                <div class="history-steps">
                    <el-steps direction="vertical" :active="activeStepIndex + 1">
                        <el-step v-for="(step, index) in historySteps && historySteps.sort()" :key="'history-' + index" :title="step.operateTypeText">
                            <template #description>
                                <div class="step-description">
                                    <p>{{ step.operateDesc }}</p>
                                    <p class="step-operator">操作人: {{ step.operateUser }}</p>
                                    <!-- 10 进行中  20-已完成  30-已取消 -->
                                    <p class="step-operator">状态: <el-tag
                                            :type="step.status == 30 ? 'danger' : step.status == 10 ? 'warning' : ''">{{
                                                step.statusText }}</el-tag></p>
                                    <p class="step-time">时间: {{ step.operateTime }}</p>
                                </div>
                            </template>
                        </el-step>
                    </el-steps>
                </div>

                <!-- 当前节点 -->
                <div class="current-node" v-if="currentStep">
                    <div class="node-header">
                        <i class="el-icon-warning-outline"></i>
                        <span>当前节点</span>
                    </div>
                    <div class="node-content">
                        <div class="node-title">{{ currentStep.operateTypeText }}</div>
                        <div class="node-description">{{ currentStep.operateDesc }}</div>
                    </div>
                </div>

                <!-- 下一步分支 -->
                <div class="next-branches" v-if="nextSteps && nextSteps.length > 0">
                    <div class="branches-header">
                        <i class="el-icon-guide"></i>
                        <span>下一步操作</span>
                    </div>

                    <div class="branches-container">
                        <div v-for="(branch, index) in nextSteps" :key="'branch-' + index" class="branch-item">
                            <div class="branch-arrow">
                                <i class="el-icon-arrow-right"></i>
                            </div>
                            <el-card shadow="hover" class="branch-card">
                                <div slot="header" class="branch-header">
                                    <span class="branch-title">{{ branch.title }}</span>
                                    <el-tag :type="getBranchTagType(branch.type)">{{ branch.typeText }}</el-tag>
                                </div>
                                <div class="branch-content">
                                    <p class="branch-description">{{ branch.description }}</p>
                                    <p v-if="branch.conditions" class="branch-conditions">
                                        <span class="condition-label">条件:</span> {{ branch.conditions }}
                                    </p>
                                    <div class="branch-actions" v-if="branch.canExecute">
                                        <el-button type="primary" size="small" @click="handleAction(branch)">
                                            {{ branch.actionText || '执行' }}
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
                <!-- 没有下一步操作的情况 -->
                <!-- <div class="no-next-steps" v-else>
                    <el-empty description="订单已完成，没有下一步操作"></el-empty>
                </div> -->
            </div>
        </div>
        <!-- </el-dialog> -->
    </div>
</template>

<script>
export default {
    name: 'OrderFlowChart',
    props: {
        order: {
            type: Object,
            required: true
        },
        rowDta: {
            type: Object,
            required: true
        },
        historySteps: {
            type: Array,
            default: () => []
        },
        currentStep: {
            type: Object,
            default: null
        },
        nextSteps: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            dialogVisible: false,
            activeStepIndex: 0
        };
    },
    computed: {
        // 计算当前激活的步骤索引
        activeStepIndex() {
            return this.historySteps.length - 1;
        }
    },
    methods: {
        showFlowDialog() {
            this.dialogVisible = true;
        },

        getStepDescription(step) {
            let desc = step.operateUser || '';
            if (step.operateUser) {
                desc += `\n操作人: ${step.operateUser}`;
            }
            if (step.time) {
                desc += `\n时间: ${step.operateTime}`;
            }
            return desc;
        },

        getStatusType(status) {
            // 根据状态返回不同的类型
            const statusMap = {
                10: 'warning',
                30: 'primary',
                40: 'success',
                20: 'danger',
            };
            return statusMap[status] || 'info';
        },

        getBranchTagType(type) {
            // 根据分支类型返回标签类型
            const typeMap = {
                'normal': '',
                'important': 'success',
                'warning': 'warning',
                'special': 'danger'
            };
            return typeMap[type] || 'info';
        },

        handleAction(branch) {
            // 触发操作事件
            this.$emit('branch-action', branch);
        }
    }
}
</script>

<style lang="scss" scoped>
.order-flow-chart {
    // 组件样式
}

.flow-chart-dialog {
    .flow-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ebeef5;

        .flow-title {
            font-size: 18px;
            font-weight: bold;
        }

        .flow-status {
            .status-text {
                font-weight: bold;

                &.status-success {
                    color: #67c23a;
                }

                &.status-warning {
                    color: #e6a23c;
                }

                &.status-primary {
                    color: #409eff;
                }

                &.status-danger {
                    color: #f56c6c;
                }

                &.status-info {
                    color: #909399;
                }
            }
        }
    }

    .flow-chart-container {
        display: flex;

        .history-steps {
            width: 40%;
            padding-right: 20px;
            border-right: 1px dashed #dcdfe6;

            .step-description {
                font-size: 14px;
                margin-top: 5px;
                margin-bottom: 10px;

                .step-operator,
                .step-time {
                    font-size: 12px;
                    color: #909399;
                    margin-top: 5px;
                }
            }
        }

        .current-node {
            padding: 0 20px;

            .node-header {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
                font-size: 16px;
                font-weight: bold;
                color: #409eff;

                i {
                    margin-right: 5px;
                }
            }

            .node-content {
                background: #f0f9ff;
                border-radius: 4px;
                padding: 15px;

                .node-title {
                    font-weight: bold;
                    margin-bottom: 10px;
                }

                .node-description {
                    color: #606266;
                    font-size: 14px;
                }
            }
        }

        .next-branches {
            width: 40%;
            padding-left: 20px;

            .branches-header {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
                font-size: 16px;
                font-weight: bold;
                color: #67c23a;

                i {
                    margin-right: 5px;
                }
            }

            .branches-container {
                .branch-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;

                    .branch-arrow {
                        color: #409eff;
                        font-size: 20px;
                        margin-right: 10px;
                    }

                    .branch-card {
                        flex: 1;

                        .branch-header {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .branch-title {
                                font-weight: bold;
                            }
                        }

                        .branch-content {
                            .branch-description {
                                margin-bottom: 10px;
                            }

                            .branch-conditions {
                                font-size: 13px;
                                color: #909399;
                                margin-bottom: 15px;

                                .condition-label {
                                    font-weight: bold;
                                }
                            }

                            .branch-actions {
                                display: flex;
                                justify-content: flex-end;
                            }
                        }
                    }
                }
            }
        }

        .no-next-steps {
            width: 40%;
            padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>